<template>
    <div class="selectStore">
        <el-dialog title="选择门店" :visible.sync="showSelectStoreCon" :before-close="handelClose" @open="handelOpen">
            <div class="dialog-search-con">
                <div class="dialog-search-item">
                    <div class="dialog-search-item-title">商品名称</div>
                    <div class="dialog-search-item-input">
                        <el-input size="mini" v-model="formData.storeName" placeholder="请输入商品名称" @change="handleSearch"></el-input>
                    </div>
                </div>
            </div>
            <div>
                <el-table height="400" :data="productData" border size="mini" @selection-change="handleSelectionChange"
                    :header-cell-style="{background:'#f8f8f8'}" style="width: 100%;">
                    <el-table-column type="selection" width="50" align="center"></el-table-column>
                    <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column property="storeNo" label="门店编号" width="" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column property="storeName" label="门店名称" width="" align="center" :show-overflow-tooltip="true"></el-table-column>
                </el-table>
            </div>
            <div class="dialog-btn-con">
                <el-button size="small" type="primary" @click="handelSure">确定</el-button>
                <el-button size="small" @click="handelClose">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { findStoreInfoByStoreName } from "@/common/service/horsemanManagement/horsemanInfo.js";
export default {
    name: "selectStore",
    data() {
        return {
            formData: {
                storeName: "" //门店编号
            },
            selectionData: [], //勾选框勾选的数据
            productData: [] //门店表格数据
        };
    },
    created() {},
    methods: {
        /*-----------------------------查询操作-----------------------------*/
        //查询门店表格数据
        _findStoreInfoByStoreName() {
            findStoreInfoByStoreName(this.formData)
                .then(res => {
                    this.productData = res;
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },
        //点击查询
        handleSearch() {
            this._findStoreInfoByStoreName();
        },

        /*-----------------------------保存选择的门店操作-----------------------------*/
        handelSure() {
            if (this.selectionData.length) {
                this.$emit("sure", JSON.stringify(this.selectionData));
            } else {
                this.$message.error("门店不能为空，请选择门店");
            }
        },

        /*-----------------------------监测勾选框操作-----------------------------*/
        handleSelectionChange(val) {
            this.selectionData = val;
        },

        /*-----------------------------关闭弹窗-----------------------------*/
        handelClose() {
            this.$emit("close", false);
        },

        /*-----------------------------打开弹窗-----------------------------*/
        handelOpen() {
            this.formData = {
                storeName: ""
            };
            this.productData = [];
        }
    },
    props: {
        showSelectStoreCon: {
            type: Boolean,
            default: false
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.dialog-search-con {
    padding-top: 15px;
}
</style>